<template>
	<view>
		<view :class="['navbar',isScroll === true ? 'nav-fixed':'nav-normal']"
			:style="{ 'height': navheight +parseInt(slotheight)+ 'px' ,'background-color' : bgcolor}">
			<view :style="{ 'height': navheight + 'px' ,'background-color' : bgcolor}">
				<view :style="{'height': statusBarHeight +'px'}"></view>
				<view class="header" @click="getTool" :style="{'height': menuHeight +'px'}">

					<view class="hai" :style="{'line-height': menuHeight +'px'}">
						群聊邀请
					</view>
				</view>
			</view>

		</view>
		<image src="https://static-1310167831.cos.ap-nanjing.myqcloud.com/uploads/20230626/13a6d92eadf72f8fb5bf2eacf62adea9.png" style="width: 100%;display: block;height: 100vh;" mode=""></image>
		<view :style="{'top': (navheight+30)+'px'}" class="shang_city">
			<view style="line-height: 100rpx;text-align: center;width: 100%;font-size: 42rpx;color: #333333;margin-bottom: 30rpx;margin-top: 50rpx;">
				{{name || ''}}邀请您加入群聊
			</view>
			<view style="width: 100%;padding-top:60rpx;position: relative;">
				<view style="width: 690rpx;margin: 20rpx auto;background-color: #fff;border-radius: 20rpx;padding: 100rpx 0 30rpx;">
					<view style="line-height: 50rpx;color: #000;font-size: 32rpx;text-align: center;">
						{{xq.name || ''}}
					</view>
					<view style="line-height: 40rpx;color: #999;font-size: 24rpx;text-align: center;">
						{{xq.introduction || ''}}
					</view>
				</view>
				<view style="width: 160rpx;height: 160rpx;border-radius: 50%;background-color: #fff;box-sizing: border-box;padding: 6rpx;position: absolute;top: 0;left: 50%;transform: translateX(-50%);">
					<image :src="xq.avatar" style="width: 148rpx;height: 148rpx;display: block;border-radius: 50%;" mode=""></image>
				</view>
			</view>
			<view @click="tongyi" style="width: 380rpx;background-color: #1FB0AC;height: 90rpx;line-height: 90rpx;text-align: center;border-radius: 46rpx;color: #fff;font-size:28rpx ;margin: 200rpx auto 40rpx;">
				同意加入
			</view>
		</view>

		<uni-popup id="popup" ref="popup" :type="type_status" :animation="true">
			<view class="" style="background-color: #FFFFFF;padding:20upx 30upx 0;border-radius: 20upx;width: 500rpx;">
				<view
					style="text-align: center;height: 100upx;line-height: 100upx;color: #333333;font-weight: 600;font-size: 32rpx;">
					提示
				</view>
				<view class="popup-content" style="text-align: center;font-size: 28upx;">请授权您的用户信息</view>
				<view class="footer">
					<button @click="quxiao"
						style="flex: 1;background-color: #f3f3f3;color: #333333;margin-right: 20rpx;font-weight: 600;"
						type="default">取消</button>
					<button @click="login" lang="zh_CN" style="flex: 1;background-color: #000000;color: #FFFFFF;"
						open-type="getUserInfo">确定</button>
					<!-- <button @click="submitLink" type="default" class="submit">确认提交</button> -->
				</view>
			</view>
		</uni-popup>



		<uni-popup id="popup" ref="popup1" :type="type_status" :animation="true">
			<view class="" style="background-color: #FFFFFF;padding:20upx 30upx 0;border-radius: 20upx;width: 500rpx;">
				<view
					style="text-align: center;height: 100upx;line-height: 100upx;color: #333333;font-weight: 600;font-size: 32rpx;">
					提示
				</view>
				<view class="popup-content" style="text-align: center;font-size: 28upx;">请授权您的手机号</view>
				<view class="footer">
					<button @click="quxiao1"
						style="flex: 1;background-color: #f3f3f3;color: #333333;margin-right: 20rpx;font-weight: 600;"
						type="default">取消</button>
					<button @getphonenumber="login1" style="flex: 1;background-color: #000000;color: #FFFFFF;"
						open-type="getPhoneNumber">确定</button>

				</view>
			</view>
		</uni-popup>
		<noLoginToast ref="noLoginToast"/>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				scrollTop: 0,
				navheight: 0,
				statusBarHeight: 0,
				menuHeight: 0,
				haveBack: false,
				btnHeight: 30,
				btnWidth: 70,
				isScroll: true,
				slotheight: '0',
				xiao: true,
				group_id:'',
				name:'',
				xq:{},
				is_join:'',
				is_mobile:'',
				type_status:'center',
				is_mobile:'',
				is_edit:''
			}
		},
		onLoad(option) {
			this.group_id=option.group_id
			this.name=option.name
			this.shou()
		},
		methods:{
			getSysHeightInfo() {
				const that = this
				let statusBarHeight, menuButtonObject, menuHeight, navheight, haveBack, btnHeight, btnWidth

				statusBarHeight = uni.getSystemInfoSync().statusBarHeight
				//#ifdef MP-WEIXIN
				menuButtonObject = uni.getMenuButtonBoundingClientRect()
				menuHeight = menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2
				navheight = menuHeight + statusBarHeight
				btnHeight = menuButtonObject.height
				btnWidth = menuButtonObject.width
				//#endif
				//#ifdef H5
				menuHeight = 44
				navheight = menuHeight + statusBarHeight
				btnHeight = 30
				btnWidth = 70
				//#endif
				if (getCurrentPages().length === 1) { // 当只有一个页面时
					haveBack = false;
				} else {
					haveBack = true;
				}
				that.navheight = navheight
				that.statusBarHeight = statusBarHeight
				that.menuHeight = menuHeight
				that.haveBack = haveBack
			},
			async tongyi(){
				let isLogin = await this.$refs.noLoginToast.open()
				if (isLogin) {
					let isHasMobile = await this.$refs.noLoginToast.getPhoneNumber()
					if (!isHasMobile) {
						return
					}
				}
				if(this.is_mobile!=1 || this.is_edit!=1){
					uni.navigateTo({
						url:'/subpages/pages/shouquan?group_id='+this.group_id
					})
				}else{
					this.post('api/im/im/join_wechat_group',{group_id:this.group_id,is_check:2},true).then(res=>{
						if(res.code==1){
							uni.showToast({
								title: res.msg,
								icon: "none",
								duration: 1000
							})
							setTimeout(function(){
								uni.switchTab({
									url:'/pages/index/xiaoxi'
								})
							},1500)
						}else{
							uni.showToast({
								title: res.msg,
								icon: "none",
								duration: 1000
							})
						}
					})
				}
			},
			shou(){
				this.post('api/im/im/invite_wechat_group',{group_id:this.group_id},true).then(res=>{
					console.log(res)
					if(res.code==1){
						this.xq=res.data.group
						this.is_join=res.data.is_join
						this.is_mobile=res.data.is_mobile
						this.is_edit=res.data.is_edit
						if(res.data.is_join==1){
							uni.switchTab({
								url:'/pages/index/xiaoxi'
							})
						}
					}
				})
			},
			quxiao1: function() {
				this.$refs.popup1.close()
			},
			login1: function(e) {
				console.log(e)
				let that = this
				this.$refs.popup1.close()
				uni.login({
					provider: 'weixin',
					success: (code) => {
						console.log(code)
						this.post1('api/wechat/phone', {
							code: code.code,
							iv: e.detail.iv,
							encryptedData: e.detail.encryptedData
						},false).then(res => {
							console.log(res, '123455')
							if (res.code == 1) {
								uni.setStorageSync('mobile', res.data.phoneNumber)
								uni.setStorageSync('mobile2',res.data.mobile2)
								that.shou()
							}else{
								uni.showToast({
									title: res.msg,
									icon: "none",
									duration: 1000
								})
							}

						})

					}
				})
			},
		},
		mounted() {
			const that = this
			this.getSysHeightInfo()
			//#ifdef H5
			window.onscroll = function() {
				var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
				if (scrollTop > 30) {
					that.isScroll = true
				} else {
					that.isScroll = false
				}
			}
			//#endif

		},
		onPageScroll(t) {

			t.scrollTop > 20 ? this.xiao = false : this.xiao = true;
			// t.scrollTop > 80 ? this.da = true : this.da = false;

		},
		watch: {
			scrollTop(newValue, oldValue) {
				//#ifdef MP-WEIXIN
				const that = this
				if (newValue > 1) {
					that.isScroll = true
				} else {
					that.isScroll = false
				}
				//#endif
			}
		},
	}
</script>

<style lang="scss">
	.footer {
		display: flex;
		justify-content: space-between;
		border-top: 1px solid #f4f4f4;
		margin-top: 30rpx;
		padding-bottom: 20rpx;

		button {
			margin: 0 auto;
			width: 100%;
			background-color: #19BE6B;
			// width: 200upx;
			border-radius: 10upx;
			font-size: $uni-font-size-sm;
			// padding: 22upx 34upx;
			height: 80upx;
			font-size: 30rpx;
			line-height: 80upx !important;
			// line-height: 1;
			color: #FFFFFF;
		}

		button:after {
			border: 0;
		}
	}
	page {

		font-family: Demibold;
		height: 100vh;
	}
	.shang_city {
		width: 92%;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		box-sizing: border-box;
		padding-bottom:40rpx;
	}
	.hai {
		text-align: center;
		font-size: 30rpx;
		color: #000;
	}
	// 头部
	.navbar {
		width: 100%;
		overflow: hidden;
		top: 0;
		left: 0;
		z-index: 999;
		flex-shrink: 0;
		color: #fff;
		font-size: 16px;
	}

	.nav-normal {
		position: relative;
	}

	.nav-fixed {
		position: fixed;
	}

	.header {
		position: fixed;
		width: 100%;
	}

	.logo-centent {
		display: flex;
		align-items: center;
	}

	.logo-centent image {
		width: 260rpx;
		height: 68rpx;
		margin-left: 20rpx;
	}

	.hearder-status {
		display: flex;
		align-items: center;
		position: absolute;
		padding-left: 30rpx;
		height: 100%;
		z-index: 99999;

	}

	.header-title {
		height: 100%;
		left: 0;
		right: 0;
		position: absolute;
		margin: auto;
		text-align: center;
	}

	.header-title image {
		position: absolute;
		width: 270rpx;
		height: 35rpx;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.header-title-left {
		height: 100%;
		left: 0;
		right: 0;
		position: absolute;
		margin: auto;
		text-align: left;
	}

	.back-text {
		margin-left: 7px;
		width: 100upx;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	.hearder-status .nav-title-left {
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: rgba(0, 0, 0, .8);
		width: 100%;
		font-weight: bold;
	}

	.hearder-status .nav-btn {
		/* background-color: rgba(255, 255, 255, .5);
		border-radius: 15px; */
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: rgba(0, 0, 0, .8);
		width: 50%;
		font-weight: bold;
	}

	.hearder-status .nav-btn .gotback,
	.hearder-status .nav-btn .gothome {
		flex: 1;
		text-align: center;
		font-size: 18px;
	}

	.Addslot {
		position: absolute;
		width: 100%;
	}
</style>